<template>
	<view class="u-page">
		<u-sticky>
			<view class="search">
				<u-subsection class="scarch-subsection" :list="LeaveAuditOptions" :current="selStatus"
					@change="changeStatus" mode="subsection" inactiveColor="#3C9CFF" />
				<u-input class="scarch-name" placeholder="请输入学生的学号或姓名" shape="circle" v-model="selName">
					<template slot="suffix">
						<view class="scarch-btn-box">
							<uni-icons type="close" style="margin-right:10rpx" size="45rpx" color="lightgray"
								@click="clearStuName" />
							<u-button class="scarch-btn" @tap="getLeaveList" text="搜索" type="primary" size="small"
								plain />
						</view>
					</template>
				</u-input>
			</view>
		</u-sticky>
		<u-list class="list-box" @scrolltolower="scrolltolower" :preLoadScreen="queryParams.pageNum">
			<u-list-item class="list-item" v-for="(item, index) in listLeave" :key="index">
				<span @click="changeInfo(item)">
					<p style="margin-bottom:30rpx;">
						<span>{{item.sno}}&emsp;{{item.stuName}}</span>
						<u-tag class="list-item-tag" v-for="audit in LeaveAuditOptions"
							v-if="audit.value == item.status" :type="audit.type == 'danger' ? 'error' : audit.type"
							:text="audit.name" plain />
					</p>
					<p>开始时间：{{item.beginTime}}</p>
					<p>结束时间：{{item.endTime}}</p>
					<p style="margin-top: 20rpx;">
						<span style="display:inline-block;width:40%">天数：{{item.duration / 10}}天</span>
						<span style="display:inline-block;width:40%">类型：
							<span v-for="typeName in LeaveTypeOptions" v-if="typeName.value == item.leaveType">
								{{typeName.name}}
							</span>
						</span>
						<u-tag style="display:inline-block;" v-if="item.parentLevelId != null" text="延假" type="warning"
							mode="light" />
					</p>
				</span>
			</u-list-item>
			<view class="more">
				<view v-show="listLeave.length < total && listLeave.length!=0">------ 上滑加载更多 ------</view>
				<view v-show=" listLeave.length>= total && listLeave.length!=0">------ 已加载全部 ------</view>
			</view>
			<u-empty style="margin-top:100px" v-if="listLeave.length==0" mode="search" :iconSize="140" :textSize="24"
				icon="http://cdn.uviewui.com/uview/empty/search.png" />
		</u-list>
	</view>
</template>

<script>
	import {
		listLeave,
		getLeave,
		delLeave,
		addLeave,
		updateLeave,
		auditLeave
	} from "@/api/backend/leave";
	import {
		getDicts
	} from "@/api/system/dict/data";

	export default {
		name: "AuditLeave",
		data() {
			return {
				selName: null,
				selStatus: 1,
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					stuName: null,
					status: 1,
				},
				auditList: [{
					name: "待审核",
				}, {
					name: "已通过",
				}, {
					name: "不通过",
				}, ],
				// 总条数
				total: 0,
				// 请假审核表格数据
				listLeave: [],
				LeaveTypeOptions: [],
				LeaveAuditOptions: [],
			}
		},
		onLoad() {
			this.getList();
			// this.loadmore();
			this.changeStatus(0);
			getDicts("leave_types").then((response) => {
				//遍历字典数组并重新赋值LeaveTypeOptions
				this.LeaveTypeOptions = response.data.map(item => {
					return {
						name: item.dictLabel,
						value: item.dictValue
					};
				});
			});
			getDicts("leave_audit").then((response) => {
				//遍历字典数组并重新赋值LeaveAuditOptions
				this.LeaveAuditOptions = response.data.map(item => {
					return {
						name: item.dictLabel,
						value: item.dictValue,
						type: item.listClass,
					};
				});
			});
		},
		methods: {
			getLeaveList() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 5,
					stuName: this.selName,
					status: this.selStatus + 1,
				}
				this.getList();
			},
			/** 查询请假审核列表 */
			getList() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				listLeave(this.queryParams).then(response => {
					this.listLeave = response.rows;
					this.total = response.total;
				});
			},
			scrolltolower() {
				if (this.queryParams.pageNum * 5 <= this.total) {
					this.queryParams = {
						pageNum: this.queryParams.pageNum + 1,
						pageSize: 5,
						stuName: this.selName,
						status: this.selStatus + 1,
					}
					listLeave(this.queryParams).then(response => {
						this.listLeave = this.listLeave.concat(response.rows);
						this.total = response.total;
					});
				}
			},
			changeStatus(index) {
				this.selStatus = index;
				this.getLeaveList();
			},
			changeInfo(item) {
				item.process = '2';
				uni.navigateTo({
					url: '/pages/leaveAudit/leaveDetails?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			clearStuName() {
				this.queryParams.stuName = "";
				this.selName = "";
				this.getList();
			},
		},
	}
</script>

<style scoped lang="scss">
	.scarch-btn-box {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
	}

	.more {
		width: 708rpx;
		height: 100rpx;
		margin: 10rpx 22rpx 30rpx 22rpx;
		padding: 0 20rpx 0 0;
		color: rgb(116, 116, 116);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.list-box {
		max-height: 84.6vh;
	}

	.search {
		padding: 10px 10px 0px 10px;
		background-color: #F1F1F1;
	}

	.scarch-name {
		margin-top: 20rpx;
		background-color: white;
	}

	.scarch-btn {
		border-radius: 100px 100px 100px 100px;
	}

	.scarch-subsection {
		margin-top: 10px;
		background-color: white;
	}

	.list-item {
		background-color: white;
		width: 86%;
		margin: 10px 7% 10px 7%;
		padding: 15px;
		border-radius: 10px;
		box-shadow: lightgray 0px 0px 10px;
	}

	.list-item p {
		margin: 5px;
	}

	.list-item-tag {
		display: inline-block;
		float: right;
	}

	.upward {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		border: 3rpx solid #d0d0d0;
		margin-bottom: 20rpx;
		background-color: rgba(255, 255, 255, 0.4);
		position: fixed;
		bottom: 300rpx;
		right: 30rpx;
	}

	.top-back {
		position: fixed;
		right: 0;
		background-color: #00c47f;
		top: 70%;
		height: 50px;
		line-height: 50px;
		z-index: 999;
		color: #fff;
		border-radius: 45rpx;
		width: 95rpx;

		.gotoback {
			font-size: 22rpx;
			text-align: center;
		}
	}
</style>
